<template>
	<view class="mord">
		<view class="top">
			<view @click='tab(0)' :class="{'active':num==0}">
				全部
			</view>
			<view @click='tab(1)' :class="{'active':num==1}">
				待付款
			</view>
			<view @click='tab(2)' :class="{'active':num==2}">
				待发货
			</view>
			<view @click='tab(3)' :class="{'active':num==3}">
				待收货
			</view>
			<view @click='tab(4)' :class="{'active':num==4}">
				待评价
			</view>
		</view>
		<scroll-view @scrolltolower='sc' scroll-y="true" class="ddlist">
			<view class="li" v-for="l in data" :key='l.id' v-if='l.oOrderDetails[0].iCommentId<=0 && l.cNextStatus == "ENDORDER"'>
				<view class="li-up">
					订单号:{{l.cOrderNo}}
					<view class="r">
						{{l.cNextStatusName}}
					</view>
				</view>
				<navigator v-for='ls in l.oOrderDetails' v-if="l.cNextStatus == 'PAYMONEY'" :url="'/pages/user/oderpay?cOrderNo='+l.cOrderNo"
				 class="con">
					<view class="img">
						<image :src="ls.DefaultImage" mode="widthFix"></image>
					</view>
					<view class="text">
						{{ls.cProductName}}

					</view>
					<view class="numb">
						￥{{ls.fSalePrice}}
						<view>
							x{{ls.iQuantity}}
						</view>
					</view>

				</navigator>
				<navigator v-for='ls in l.oOrderDetails' v-if="l.cNextStatus == 'CLOSEORDER'" :url="'/pages/user/oderpay?cOrderNo='+l.cOrderNo"
				 class="con">
					<view class="img">
						<image :src="ls.DefaultImage" mode="widthFix"></image>
					</view>
					<view class="text">
						{{ls.cProductName}}

					</view>
					<view class="numb">
						￥{{ls.fSalePrice}}
						<view>
							x{{ls.iQuantity}}
						</view>
					</view>

				</navigator>

				<navigator v-for='ls in l.oOrderDetails' v-if="l.cNextStatus == 'DELIVERGOODS' || l.cNextStatus == 'TAKEDELIVERY'"
				 :url="'/pages/user/oderDs?cOrderNo='+l.cOrderNo" class="con">
					<view class="img">
						<image :src="ls.DefaultImage" mode="widthFix"></image>
					</view>
					<view class="text">
						{{ls.cProductName}}

					</view>
					<view class="numb">
						￥{{ls.fSalePrice}}
						<view>
							x{{ls.iQuantity}}
						</view>
					</view>

				</navigator>
				<navigator v-for='ls in l.oOrderDetails' v-if="l.cNextStatus == 'ENDORDER'" :url="'/pages/user/oderOver?cOrderNo='+l.cOrderNo"
				 class="con">
					<view class="img">
						<image :src="ls.DefaultImage" mode="widthFix"></image>
					</view>
					<view class="text">
						{{ls.cProductName}}

					</view>
					<view class="numb">
						￥{{ls.fSalePrice}}
						<view>
							x{{ls.iQuantity}}
						</view>
					</view>

				</navigator>
				<view class="li-up">
					运费
					<view class="ri">
						￥{{l.iPostage}}
					</view>
				</view>
				<view class="li-up">
					<view class="ri">
						共{{l.oOrderDetails.length}}件商品 合计￥{{l.fPayMoney}}
					</view>
					<text class="both"></text>
				</view>
				<view class="butbox">
					<view class="butb" @click="out(l.cOrderNo)" v-if="l.cNextStatus == 'PAYMONEY' || l.cNextStatus =='DELIVERGOODS' || l.cNextStatus == 'DELIVERGOODS'">
						取消订单
					</view>
					<view v-if="l.cNextStatus == 'PAYMONEY'" @click="link(l.fPayMoney,l.cOrderNo)" class="buta">
						付款
					</view>
					<!-- <view v-if="l.cNextStatus == 'DELIVERGOODS'" class="buta">
						提醒发货
					</view> -->
					<view @click='invoice(l.oOrderDetails)' v-if="l.cNextStatus == 'ENDORDER' && l.oOrderDetails[0].iCommentId<=0"
					 class="buta">
						开发票
					</view>
					<view @click='oderNew(l.oOrderDetails)' v-if="l.cNextStatus ==  'ENDORDER' || l.cNextStatus == 'CLOSEORDER'" class="buta">
						再次购买
					</view>
					<navigator v-if="l.cNextStatus == 'TAKEDELIVERY'" :url="'/pages/user/logistics?id='+l.cOrderNo" class="buta">
						查看物流
					</navigator>
					<view @click="shou(l.cOrderNo)" v-if="l.cNextStatus == 'TAKEDELIVERY'" class="butb">
						确认收货
					</view>
					<!-- <view @click='bach(l.oOrderDetails[0].id,l.oOrderDetails[0].iProductId,l.id,l.oOrderDetails[0].iSKUId,l.oOrderDetails[0].cOrderNo,l.oOrderDetails[0].cProductName,l.oOrderDetails[0].DefaultImage)' v-if="l.cNextStatus == 'ENDORDER'" class="buta"> -->
					<view @click='bach(l.oOrderDetails,l.id)' v-if="l.cNextStatus == 'ENDORDER' && l.oOrderDetails[0].iCommentId<=0"
					 class="buta">
						评论
					</view>
					<navigator :url="'/pages/user/odersh?cOrderNo='+l.cOrderNo" v-if="l.cNextStatus == 'ENDORDER'" class="buta">
						申请售后
					</navigator>
					<view @click='del(l.id)' v-if="l.cNextStatus == 'ENDORDER' || l.cNextStatus == 'CLOSEORDER'" class="butb">
						删除订单
					</view>
				</view>
			</view>
			<view class="li" v-for="l in data" :key='l.id'>
				<view class="li-up">
					订单号:{{l.cOrderNo}}
					<view class="r">
						{{l.cNextStatusName}}
					</view>
				</view>
				<navigator v-for='ls in l.oOrderDetails' v-if="l.cNextStatus == 'PAYMONEY'" :url="'/pages/user/oderpay?cOrderNo='+l.cOrderNo"
				 class="con">
					<view class="img">
						<image :src="ls.DefaultImage" mode="widthFix"></image>
					</view>
					<view class="text">
						{{ls.cProductName}}

					</view>
					<view class="numb">
						￥{{ls.fSalePrice}}
						<view>
							x{{ls.iQuantity}}
						</view>
					</view>

				</navigator>
				<navigator v-for='ls in l.oOrderDetails' v-if="l.cNextStatus == 'CLOSEORDER'" :url="'/pages/user/oderpay?cOrderNo='+l.cOrderNo"
				 class="con">
					<view class="img">
						<image :src="ls.DefaultImage" mode="widthFix"></image>
					</view>
					<view class="text">
						{{ls.cProductName}}

					</view>
					<view class="numb">
						￥{{ls.fSalePrice}}
						<view>
							x{{ls.iQuantity}}
						</view>
					</view>

				</navigator>

				<navigator v-for='ls in l.oOrderDetails' v-if="l.cNextStatus == 'DELIVERGOODS' || l.cNextStatus == 'TAKEDELIVERY'"
				 :url="'/pages/user/oderDs?cOrderNo='+l.cOrderNo" class="con">
					<view class="img">
						<image :src="ls.DefaultImage" mode="widthFix"></image>
					</view>
					<view class="text">
						{{ls.cProductName}}

					</view>
					<view class="numb">
						￥{{ls.fSalePrice}}
						<view>
							x{{ls.iQuantity}}
						</view>
					</view>

				</navigator>
				<navigator v-for='ls in l.oOrderDetails' v-if="l.cNextStatus == 'ENDORDER'" :url="'/pages/user/oderOver?cOrderNo='+l.cOrderNo"
				 class="con">
					<view class="img">
						<image :src="ls.DefaultImage" mode="widthFix"></image>
					</view>
					<view class="text">
						{{ls.cProductName}}

					</view>
					<view class="numb">
						￥{{ls.fSalePrice}}
						<view>
							x{{ls.iQuantity}}
						</view>
					</view>

				</navigator>
				<view class="li-up">
					运费
					<view class="ri">
						￥{{l.iPostage}}
					</view>
				</view>
				<view class="li-up">
					<view class="ri">
						共{{l.oOrderDetails.length}}件商品 合计￥{{l.fPayMoney}}
					</view>
					<text class="both"></text>
				</view>
				<view class="butbox">
					<view class="butb" @click="out(l.cOrderNo)" v-if="l.cNextStatus == 'PAYMONEY' || l.cNextStatus =='DELIVERGOODS' || l.cNextStatus == 'DELIVERGOODS'">
						取消订单
					</view>
					<view v-if="l.cNextStatus == 'PAYMONEY'" @click="link(l.fPayMoney,l.cOrderNo)" class="buta">
						付款
					</view>
					<!-- <view v-if="l.cNextStatus == 'DELIVERGOODS'" class="buta">
						提醒发货
					</view> -->
					<view @click='invoice(l.cOrderNo)' v-if="l.cNextStatus ==  'ENDORDER' || l.cNextStatus == 'CLOSEORDER'" class="buta">
						开发票
					</view>
					<view @click='oderNew(l.oOrderDetails)' v-if="l.cNextStatus ==  'ENDORDER' || l.cNextStatus == 'CLOSEORDER'" class="buta">
						再次购买
					</view>
					<navigator v-if="l.cNextStatus == 'TAKEDELIVERY'" :url="'/pages/user/logistics?id='+l.cOrderNo" class="buta">
						查看物流
					</navigator>
					<view @click="shou(l.cOrderNo)" v-if="l.cNextStatus == 'TAKEDELIVERY'" class="butb">
						确认收货
					</view>
					<!-- <view @click='bach(l.oOrderDetails[0].id,l.oOrderDetails[0].iProductId,l.id,l.oOrderDetails[0].iSKUId,l.oOrderDetails[0].cOrderNo,l.oOrderDetails[0].cProductName,l.oOrderDetails[0].DefaultImage)' v-if="l.cNextStatus == 'ENDORDER'" class="buta"> -->
					<view @click='bach(l.oOrderDetails,l.id)' v-if="l.cNextStatus == 'ENDORDER' && l.oOrderDetails[0].iCommentId<=0"
					 class="buta">
						评论
					</view>
					<navigator :url="'/pages/user/odersh?cOrderNo='+l.cOrderNo" v-if="l.cNextStatus == 'ENDORDER'" class="buta">
						申请售后
					</navigator>
					<view @click='del(l.id)' v-if="l.cNextStatus == 'ENDORDER' || l.cNextStatus == 'CLOSEORDER'" class="butb">
						删除订单
					</view>
				</view>
			</view>

		</scroll-view>
		<view class="meng" v-if="meng == true">
			<view class="tan">
				<view class="titles">
					选择取消原因
					<view class="closes" @click="closes">
						<image src="../../static/img/1/30.png" mode="widthFix"></image>
					</view>
				</view>
				<scroll-view scroll-y="true" class="conest">
					<view class="liso" @click='re(l.reason)' v-for='l in liso'>
						{{l.reason}}
						<image v-if='rea == l.reason' src="/static/img/3/3-75.png" mode="widthFix"></image>
					</view>
				</scroll-view>
				<view class="sup" @click="sup">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {
			// iCommentId
		},
		data() {
			return {
				num: 0,
				data: [],
				liso: [],
				rea: '',
				meng: false,
				cOrderNo: '',
				types: ''
			}
		},
		onLoad(options) {
			let that = this;

			that.$Request.post(
				that.$api.httpApi.user.closeoder + '&token=' + that.$SysCache.get('token'), {
					type: "orderclose"
				}
			).then(res => {
				if (res.code == 200) {
					that.liso = res.data;
				}
			});

			if (options.id) {
				this.num = options.id
			}
			if (options.id == 1) {
				that.oder('PAYMONEY', 1);
				this.types = 'PAYMONEY'
			} else if (options.id == 2) {
				that.oder('DELIVERGOODS', 1);
				this.types = 'DELIVERGOODS'
			} else if (options.id == 3) {
				that.oder('TAKEDELIVERY', 1);
				this.types = 'TAKEDELIVERY'
			} else if (options.id == 4) {
				that.oder('ENDORDER', 1);
				this.types = 'ENDORDER'
			} else {
				that.oder(null, 1);
				this.types = null
			}
		},
		onShow() {
			this.onLoad
		},
		methods: {
			sc() {
				// var that = this;
				// that.oder('PAYMONEY', 1);
				// console.log(123)
			},
			bach(data, id) {
				var that = this;
				var data = {
					dat: data,
					id: id
				}

				uni.navigateTo({
					url: '/pages/user/orderPing?data=' + JSON.stringify(data)
				})


			},
			shou(id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否确认收到货物！',
					success(ress) {
						if (ress.confirm) {
							that.$Request.post(
								that.$api.httpApi.user.ok + '&token=' + that.$SysCache.get('token'), {
									'cOrderNo': id
								}
							).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '确认收货成功！'
									})
									that.oder(that.types);
								}
							});
						}

					}
				})

			},
			oderNew(s) {
				console.log(s);

				var that = this;
				var arr = [];
				// let datas = s
				s.forEach(item => {
					let datas = {
						"iSKUId": item.iSKUId,
						"iProductId": item.iProductId,
						"onLineOffLine": '0',
						"iQuantity": item.iQuantity,
						"dlyType": "PICKUP"
					}

					arr.push(datas)
					// that.$set(item,'onLineOffLine','0')
				})
				let obj = {
					"items": JSON.stringify(arr)
				}

				this.$Request.post(this.$api.httpApi.goods.addCarts + '&token=' + that.$SysCache.get('token'), obj).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '再次购买成功，已加入购物车！',
							duration: 2000
						})
					}
				})
			},
			invoice(cOrderNo) {
				uni.navigateTo({
					url: '/pages/order/invoice?type=1&cOrderNo=' + cOrderNo
				})
			},
			del(id) {
				let that = this;
				that.$Request.post(
					that.$api.httpApi.user.delOder + '&token=' + that.$SysCache.get('token'), {
						'orderIds': id
					}
				).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功！'
						})
						that.oder(that.types);
					}
				});
			},
			sup() {
				let that = this;
				that.$Request.post(
					that.$api.httpApi.user.closeoderOn + '&token=' + that.$SysCache.get('token'), {
						'cOrderNo': that.cOrderNo,
						'reason': that.rea
					}
				).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '取消成功！'
						})
						that.oder(that.types);
						that.meng = false
					}
				});
			},
			out(cOrderNo) {
				this.cOrderNo = cOrderNo;
				this.meng = true
			},
			closes() {
				this.meng = false
			},
			re(rea) {
				this.rea = rea
			},
			tab(id) {
				var that = this;
				this.num = id;
				if (id == 1) {
					that.oder('PAYMONEY');
					this.types = 'PAYMONEY'
				} else if (id == 2) {
					that.oder('DELIVERGOODS');
					this.types = 'DELIVERGOODS'
				} else if (id == 3) {
					that.oder('TAKEDELIVERY');
					this.types = 'TAKEDELIVERY'
				} else if (id == 4) {
					that.oder('ENDORDER');
					this.types = 'ENDORDER'
				} else {
					that.oder(null)
				}
			},
			link(fPayMoney, cOrderNo) {
				let that = this
				let data = {
					'fPayMoney': fPayMoney,
					'cOrderNo': cOrderNo
				};
				uni.navigateTo({
					url: '/pages/order/payway?data=' + JSON.stringify(data)
				})
			},
			oder(s) {
				let that = this;
				that.$Request.post(
					that.$api.httpApi.user.oder + '&token=' + that.$SysCache.get('token'), {
						'onLineOffLine': 0,
						'orderType': 2,
						status: s,
						pageSize: 300
					}
				).then(res => {
					if (res.code == 200) {
						that.data = res.data.orders;
					}
				});
			}
		},



	}
</script>

<style scoped>
	.sup {
		width: 90%;
		display: block;
		margin: auto;
		height: 60rpx;
		background: rgba(240, 64, 111, 1);
		color: #fff;
		font-size: 26rpx;
		text-align: center;
		line-height: 60rpx;
		margin-top: 12rpx;
		border-radius: 42rpx;
	}

	.meng {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
	}

	.tan {
		width: 100%;
		height: 50%;
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		border-top-right-radius: 5rpx;
		border-top-left-radius: 5rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.tan .titles {
		height: 85rpx;
		line-height: 85rpx;
		font-size: 30rpx;
		border-bottom: 1px solid #dfdfdf;
		position: relative;
	}

	.tan .titles .closes {
		position: absolute;
		width: 85rpx;
		height: 85rpx;
		right: 0;
		text-align: center;
		line-height: 93rpx;
		top: 0;
	}

	.tan .titles image {
		display: inline-block;
		width: 32rpx;


	}

	.tan .conest {
		height: calc(100% - 85rpx - 90rpx);
		overflow: auto;
	}

	.tan .conest .liso {
		height: 90rpx;
		font-size: 26rpx;
		line-height: 90rpx;
		border-bottom: 1px dashed #ededed;
	}

	.tan .conest .liso image {
		display: inline-block;
		float: right;
		width: 28rpx;
		margin-top: 30rpx;
	}

	.butbox {
		text-align: right;
	}

	.butbox view {
		display: inline-block;
		width: 123rpx;
		height: 50rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
		vertical-align: middle;
		margin-left: 20rpx;
	}

	.butbox navigator {
		display: inline-block;
		width: 123rpx;
		height: 50rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
		vertical-align: middle;
		margin-left: 20rpx;
	}

	.butbox .buta {
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(240, 64, 111, 1);
		color: rgba(240, 64, 111, 1);

	}

	.butbox .butb {
		background: rgba(32, 29, 29, 1);
		border-radius: 25px;
		color: rgba(255, 255, 255, 1);
	}

	.both {
		display: block;
		clear: both;
	}

	.con {
		margin-top: 25rpx;
		margin-bottom: 25rpx;
	}

	.numb {
		width: 90rpx;
		text-align: right;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		display: inline-block;
		vertical-align: middle;
		margin-left: 68rpx;
	}

	.numb view {
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 12rpx;
	}

	.con .text {
		display: inline-block;
		vertical-align: middle;
		width: 400rpx;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 30rpx;
		margin-left: 20rpx;
	}

	.con .text .bu {
		display: block;
		width: 162rpx;
		height: 31rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 5rpx;
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 30rpx;
		text-align: center;
		margin-top: 15rpx;
	}

	.con .img {
		display: inline-block;
		vertical-align: middle;
		width: 130rpx;
		height: 130rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(228, 228, 228, 1);
		border-radius: 5rpx;
		text-align: center;
		line-height: 130rpx;
	}

	.con .img image {
		display: inline-block;
		width: 70%;
		margin: auto;
		vertical-align: middle;
	}

	.li-up {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		margin-bottom: 25rpx;
	}

	.li-up .r {
		float: right;
		color: rgba(240, 64, 111, 1);
	}

	.li-up .ri {
		float: right;
	}

	.ddlist .li {
		background: #fff;
		margin-top: 10rpx;
		padding: 20rpx;
	}

	.top {
		height: 62rpx;
		background: #040000;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(231, 231, 231, 1);
		text-align: center;
		display: flex;
		line-height: 62rpx;
	}

	.top view {
		flex: 1;
		margin-left: 25rpx;
		margin-right: 25rpx;
	}

	.active {
		border-bottom: 3rpx solid #F0406F;
		color: #F0406F;
	}

	uni-page-body {
		height: 100%;
		overflow: hidden;
	}

	.mord {
		height: 100%;
		overflow: hidden;
		background: #EEEEEE;
	}

	.ddlist {
		height: calc(100% - 62rpx);
		overflow: auto;
	}
</style>
